@import '@material/fab/mixins.import';
@import '@material/button/variables.import';
@import '@material/theme/variables.import';
@import '../mdc-helpers/mdc-helpers';
@import '_button-base';

@include mdc-fab-without-ripple($query: $mat-base-styles-query);

.mat-mdc-fab, .mat-mdc-mini-fab {
  @include _mat-button-interactive();
  @include _mat-button-disabled();

  // MDC adds some styles to fab and mini-fab that conflict with some of our focus indicator
  // styles and don't actually do anything. This undoes those conflicting styles.
  &:not(.mdc-ripple-upgraded):focus::before {
    background: transparent;
    opacity: 1;
  }
}

// MDC expects the fab icon to contain this HTML content:
// ```html
//   <span class="mdc-fab__icon material-icons">favorite</span>
// ```
// However, Angular Material expects a `mat-icon` instead. The following
// will extend the `mdc-fab__icon` styling to the mat icon. Note that
// the extended styles inherently only match icons that nest themselves in
// a parent `mdc-fab`.
.mat-icon {
  @extend .mdc-fab__icon;
}
